import { memo, useState } from "react";
import HeaderCenterWrapper from "./style";
import IconSearchBar from "../../../asset/svgs/icon_search";
import SearchData from '@/asset/data/searchtitleData.json'
import classNames from "classnames";
import { changeShowSearch } from "../../../store/moduels/main";
import { useDispatch, useSelector } from "react-redux";

const HeaderCenter = memo(
    (props) => {
       
        const [currentIndex, setIndex] = useState(0);
       
        const { showSearch } = useSelector((state) => {
           return {
                 showSearch:state.main.showSearch
            }
        })

        const dispatch = useDispatch();

        
       
        const tabClick = (index) => {
            setIndex(index);
        }
      

        const searchBar =  (
                  <div className="search-bar" onClick={()=> dispatch(changeShowSearch(true))} >
                    <div className="text">搜索房源和体验</div>
                    <div className="icon">
                      <IconSearchBar></IconSearchBar>
                    </div>   
                  </div>
              )
        
        const searchArea = (
             <div className="search-area">
                    <div className="search-tab">
                        {SearchData.map((item,index) => {
                            return (
                                 
                                  <div key={item.title} className={classNames({'active':index===currentIndex})} onClick={()=>tabClick(index)}>
                                    {item.title}  
                                  </div>
                                
                                )
                            })}
                    </div>
                    <div className="search-infos">
                        {
                            SearchData[currentIndex].searchInfos.map((item, index) => (
                                <div className={classNames('info',{'non-last':index!=SearchData[currentIndex].searchInfos.length-1})}>
                                <div className="title">{item.title}</div>
                                <div className="desc">{item.desc}</div>
                                </div>
                            ))
                        }
                    </div>
                </div>
        ) 
        
        return (
            <HeaderCenterWrapper>
              {showSearch?searchArea:searchBar}
             </HeaderCenterWrapper>
        )
    }
)

export default HeaderCenter;